<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TableInstance } from 'element-plus'
import { useOperateLogListStore } from '../../store/operateLogList'
import { operateLogList } from '../../utils/trueType'
import utils from '../../utils/utils'
import operate from '../../api/operate'
import { useSearchOperateLogStore } from '../../store/operateLog/searchOperateLog'
const operateLogListStore = useOperateLogListStore()
const searchOperateLogStore = useSearchOperateLogStore()
const multipleTableRef = ref<TableInstance>()

const selectable = (row: operateLogList) => row.id
const handleSelectionChange = (val: operateLogList[]) => {
    operateLogListStore.selectedIds = val.map(item => item.id).filter(id => id !== null && id !== undefined) as string[];
}
async function handleCurrentChange() {
    await operate.getSpecieOperation(searchOperateLogStore.userName, searchOperateLogStore.ipAddress, searchOperateLogStore.operateType, searchOperateLogStore.Time, operateLogListStore.pageNum, operateLogListStore.pageSize).then(res => {
        operateLogListStore.setOperateLog(res.data.data);
        operateLogListStore.total = res.data.total
    }).catch(res => {
        console.log(res)
    }).finally(() => {
        operateLogListStore.changeLoading()
    })
}
async function handleSizeChange() {
    await operate.getSpecieOperation(searchOperateLogStore.userName, searchOperateLogStore.ipAddress, searchOperateLogStore.operateType, searchOperateLogStore.Time, operateLogListStore.pageNum, operateLogListStore.pageSize).then(res => {
        operateLogListStore.setOperateLog(res.data.data);
        operateLogListStore.total = res.data.total
    }).catch(res => {
        console.log(res)
    }).finally(() => {
        operateLogListStore.changeLoading()
    })

}
onMounted(async () => {
    await operate.getOperateLogList(operateLogListStore.pageNum, operateLogListStore.pageSize).then(res => {
        operateLogListStore.setOperateLog(res.data.data)
        operateLogListStore.total = res.data.total
        console.log(res.data.data)
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        operateLogListStore.changeLoading()
    })
})

</script>
<template>
    <el-table v-loading="operateLogListStore.loading" ref="multipleTableRef" :data="operateLogListStore.operateLog"
        row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" align="center" header-align="center" />
        <el-table-column property="id" label="日志编号" width="140" align="center" header-align="center" />
        <el-table-column property="operateType" label="操作类型" width="140" align="center" header-align="center" />
        <el-table-column property="username" label="操作人员" width="140" align="center" header-align="center" />
        <el-table-column property="ipAddress" label="操作地址" width="140" align="center" header-align="center" />
        <el-table-column property="operateResult" label="操作状态" width="140" align="center" header-align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.operateResult === 1" type="success">成功</el-tag>
                <el-tag v-else type="danger">失败</el-tag>
            </template>
        </el-table-column>
        <el-table-column property="operateTime" label="操作时间" width="180" align="center" header-align="center">
            <template #default="scope">{{ utils.formatDate(scope.row.operateTime) }}</template>
        </el-table-column>
        <el-table-column property="operateDetail" label="操作详情" width="200" align="center" header-align="center" />
        <el-table-column property="doTime" label="操作时间" width="auto" align="center" header-align="center">
            <template #default="scope">{{ scope.row.doTime }}毫秒</template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="operateLogListStore.pageNum"
            v-model:page-size="operateLogListStore.pageSize" :page-sizes="[5, 10, 15, 20]" :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper" :total="operateLogListStore.total"
            @update:page-size="handleSizeChange" @update:current-page="handleCurrentChange" />
    </div>
</template>
<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .demo-pagination-block {
        justify-content: center;
    }

    :deep(.el-pagination .el-pagination__sizes) {
        display: none;
    }

    .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
        display: none;
    }
}
</style>